// 引入一个路径包
const path = require("path")
const webpack = require('webpack');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: "./lib/index.ts",
    // 指定打包文件的目录
    output: {
        // path: './dist',
        path: path.resolve(__dirname, "yc-iframe-communicate"),
        // 打包后文件名称
        filename: "yc-iframe-communicate.js",
        //告诉webpack不使用箭头函数
        environment: {
            module: true,
            arrowFunction: false
        },
        // 打包出js引用方式
        // library: {
        //     type: 'umd',
        //     name: 'YcIframeCommunicate',
        //     // export: 'default'
        // },
        // libraryTarget: 'commonjs', // 设置打包模块类型为 CommonJS
        //  // 打包出js引用方式
        library: 'YcIframeCommunicate',
        libraryTarget: 'umd',
        //  libraryExport: 'default',
         umdNamedDefine: true,
    },
    externals: {},
    mode: 'production',
    // 指定webpack打包时要使用的模块
    module: {
        // 指定loader加载的规则
        rules: [{
            // test指定规则生效的文件
            test: /\.ts$/,
            // 要使用的loader简写版
            use: 'ts-loader',
            // 排除的文件
            exclude: /node-modules/
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
        ]
    },

    // 配置Webpack 插件
    // html-webpack-plugin：webpack中html插件，用来打包后自动创建html文件
    // clean-webpack-plugin：webpack中的清除插件，每次打包dist都会先清除目录
    plugins: [
        new CleanWebpackPlugin(),
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false
        })
    ],
    // 用来设置引用模块，可以将这些文件识别为模块(webpack配置.ts .js结尾的文件可为引用模块，相互export import)
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            'vue$': 'vue/dist/vue.esm-bundler.js'
        }
    }
}